<template>
  <div class="container">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

      <el-form-item label="姓名" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>

      <el-form-item label="职工号" prop="id">
        <el-input v-model="ruleForm.id"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>

      </el-form-item>

    </el-form>
  </div>
</template>


<script>
  export default {
    data() {
      return {
        ruleForm: {
          name: '',
          id: ''

        },
        rules: {
          name: [
            {required: true, message: '请输入姓名', trigger: 'change'},
          ],
          id: [
            {required: true, message: '请输入职工号', trigger: 'change'},
          ]
        }
      };
    },
    methods: {


      submitForm(formName) {
        const _this = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            sessionStorage.setItem("token", 'true')
            axios.get('http://localhost:8081//findbyteacherid/' + _this.ruleForm.id).then(function (resp) {
              if (resp.data == 'success') {
                _this.$message({
                  message: '登录成功！',
                  type: 'success'
                })
                _this.$router.push({
                  path:'/phone',
                  query:{
                    id:_this.ruleForm.id
                  }

                })
              }
              else{
                _this.$message.error('登录失败，职工号或密码错误！')
              }

            })

          } else {
            return false;
          }
        });

      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>
<style>
  .container{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*background: url("login_bg.jpg") no-repeat;*/
    background-size: cover;
  }
  .demo-ruleForm{
    background: #fff;
    padding: 50px;
    min-width: 200px;
  }
</style>
